<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>select</title>
        <style type='text/css'>
            body {font-family: verdana}
            .error {border: solid 1px red;}
            .error_text { color: red; font-size: 10px;}
            td {padding: 3px;}
			.selected {
				background-color: blue;
			}
        </style>
	</head>
	<body>
	    <div class='select'>
	    	this is selectable
	    </div>
		<div class='select'>
	    	this is selectable
	    </div>
		<p>
			This is not selectable
		</p>
		<div id='container'>
			<div class='selectme' tabindex='0'>
				Select me
			</div>
			<div class='selectme' tabindex='0'>
				Select me
			</div>
		</div>
		<a href='#' id='remove'>Remove</a>
		<script type='text/javascript' 
                src='../../../steal/steal.js?steal[app]=jquery/event/select&steal[env]=development'>   
        </script>
		<script type='text/javascript'>
			var s = {
				'selectin' : function(ev, previous){
					console.log('selectin',ev, previous)
					$(this).addClass('selected')
				},
				'selectout' : function(ev, to){
					console.log('selectout',ev, to)
					$(this).removeClass('selected')
				}
			}
			$(".select").bind(s)
			$("#container").delegate('.selectme','selectin',function(ev, previous){
				console.log('selectin',ev, previous)
				$(this).addClass('selected')
			});
			$("#container").delegate('.selectme','selectout',function(ev, previous){
				console.log('selectout',ev, previous)
				$(this).removeClass('selected')
			});
			$("#remove").click(function(){
				$("#container").remove();
			})
		</script>
	</body>
</html>